<!--vue模板-->
<template>
  <el-dialog
    @close="close"
    v-model="visible"
    :close-on-click-modal="false"
    :title="ruleForm.id ? '更新新闻' : '添加新闻'"
    width="60%"
    draggable
  >
    <!-- 表单数据 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="ruleForm"
      status-icon
    >
      <el-form-item label="新闻标题" prop="account">
        <el-input
          v-model="ruleForm.title"
          :disabled="ruleForm.id ? true : false"
          class="ipt"
          placeholder="请输入新闻标题"
        />
      </el-form-item>


      <el-form-item label="新闻发布日期" prop="publicTime">
        <el-date-picker
          v-model="ruleForm.publicTime"
          type="date"
          placeholder="请选择新闻发布日期"
          value-format="YYYY-MM-DD"
          size="default"
        />
      </el-form-item>

      <el-form-item label="新闻封面" prop="cover">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
            style="width: 300px"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="新闻内容" prop="note">
        
      </el-form-item>

      
      
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="saveUser"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script setup>
import { inject, reactive, ref } from "vue";

import userApi from "@/api/UserApi.js";
import Schema from "async-validator";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import host from "@/util/DEV_ADDRESS";

// 定义文件的上传路径
const uploadUrl = ref(host + "upload");

// 父组件控制数据的显示
const visible = inject("visible");

// 图片上传
const imageUrl = ref("");

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  ruleForm.value.cover = response.data;
  console.log(response, "图片上传");
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("Avatar picture size can not exceed 10MB!");
    return false;
  }
  return true;
};

const ruleFormRef = ref(null);

// 表单
const ruleForm = ref({
  title: "",
  publicTime: "",
  cover: "",
  content: "",
  addUserName: "",
});

// 清空表单方法
const clearForm = () => {
  ruleForm.value = {
    title: "",
    publicTime: "",
    cover: "",
    content: "",
    addUserName: "",
  };
  imageUrl.value = "";
  console.log("清空表单方法执行 clearForm");
};

// 初始化数据信息
const initUser = (userInfo) => {
  // 赋值
  ruleForm.value = userInfo;
  imageUrl.value = userInfo.signUrl;
};

defineExpose({ initUser, clearForm }); //  {"init":init}

//  表单校验规则
const rules = reactive({
  title: [{ required: true, message: "标题不得为空", trigger: "blur" }],
});

const emit = defineEmits(["close"]);

function close() {
  visible.value = false;
  // 重置表单 去除之前的校验
  ruleFormRef.value.resetFields();
  emit("close");
}

// 保存用户信息
const saveUser = () => {
  ruleFormRef.value.validate((val) => {
    console.log(val, "val");
    if (val) {
      // 更新用户
      if (ruleForm.value.id) {
        console.log("更新用户！");
        userApi.updateUserById(ruleForm.value).then((resp) => {
          ElMessage({
            type: "success",
            message: "更新成功",
          });

          close();
        });
      } else {
        // 添加用户
        userApi.insertUser(ruleForm.value).then((resp) => {
          ElMessage({
            type: "success",
            message: "添加成功！",
          });

          close();
        });
      }
    }
  });
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.ipt {
  width: 90%;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
